<template>
  <div>
    <AppSidebar />
    <div class="wrapper d-flex flex-column min-vh-100 bg-light">
      <!-- <AppHeader /> -->
      <Header />
      <div class="body bg">
      <!-- <div :class="[changeBody ? 'body bg' : 'body']"> -->
        <CContainer lg>
          <router-view />
        </CContainer>
      </div>
      <AppFooter />
    </div>
  </div>
</template>
<script>
import { CContainer } from '@coreui/vue'
import AppFooter from '@/components/AppFooter.vue'
import AppSidebar from '@/components/AppSidebar.vue'
import Header from '@/components/MyHeader.vue'
import { onBeforeRouteUpdate } from "vue-router";

export default {
  name: 'DefaultLayout',
  components: {
    AppFooter,
    Header,
    AppSidebar,
    CContainer
  },
  
  setup(){
    const changeBody = false
    // onBeforeRouteUpdate(to =>{
    //   console.log('to:',to)
    //   switch (to.name) {
    //     case "Home":
    //       return true;
    //       break;
    //     default:
    //       return true;
    //       break;
    //   }
    // })
    return {
      changeBody
    }
  }
}
</script>

<style scoped lang="scss">
@import "~@/styles/custom";
.body {
  padding-top: 6%;
  background: #fff;
}
.bg {
  background-image: $bg-style;
}
</style>


   

